<template>
  <div>
    <div id="bottom" :class="[margin]">
      <table border="1" width="600px">
        <thead>
          <th v-for="(item, index) in arrHear" :key="index">
            {{ item }}
          </th>
        </thead>
        <tbody v-for="(arr, index) in searchData" :key="index">
          <tr>
            <td>{{ arr.id }}</td>
            <td>{{ arr.name }}</td>
            <td>{{ arr.timer }}</td>
            <td>
              <button @click="show(arr.id)" id="but" :key="arr.id">
                {{ arr.operation }}
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" v-show="!searchData.length">没有数据</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <model :visible="isShow" @confirm="confirm" @cancel="cancel">
      <template slot="title">
        <h1>友情提醒</h1>
      </template>

      <template slot="body">
        <h3>是否删除数据？？</h3>
      </template>
    </model>
  </div>
</template>

<style>
table {
  border-collapse: collapse;
  text-align: center;
  border-color: blueviolet;
  color: gray;
  margin-top: 10px;
  margin-left: 15px;
}
</style>

<script>
import model from "./model.vue";
export default {
  data() {
    // console.log(this.arr);
    return {
      delId: -1,
      isShow: false,
      searchname: "",
      margin: "margin",
      arrHear: ["编号", "品牌名称", "创立时间", "操作"],

      arrBody: [
        {
          id: 1,
          name: "欧洲杯",
          timer: new Date().toLocaleTimeString(),
          operation: "删除",
        },
        {
          id: 2,
          name: "世界杯",
          timer: new Date().toLocaleTimeString(),
          operation: "删除",
        },
        {
          id: 3,
          name: "亚洲杯",
          timer: new Date().toLocaleTimeString(),
          operation: "删除",
        },
      ],
      arrBody: JSON.parse(localStorage.getItem("arrBody")) || "[]",
    };
  },
  components: {
    model,
  },
  mounted() {
    //组件挂载之后,这是一个钩子函数
    //bus的on方法
    // let _this = this;
    this.$bus.$on("add-todo", (input) => {
      this.arrBody.push(input);
      localStorage.setItem("arrBody", JSON.stringify(this.arrBody)); //永久保存到本地，直到自己主动删除
    });

    this.$bus.$on("search", (vall) => {
      this.searchname = vall;
    });
  },

  computed: {
    searchData: function () {
      //  var search = this.searchname;
      return this.arrBody.filter(
        (item) => item.name.indexOf(this.searchname) > -1
      );

      //搜索功能  网上的方法，一样可以实现当前的删除功能(所有数据的任何字段)
      //   var search = this.searchname;
      //   if (search) {
      //     return this.arrBody.filter(function (product) {
      //       return Object.keys(product).some(function (key) {
      //         return String(product[key]).toLowerCase().indexOf(search) > -1;
      //       });
      //     });
      //   }
      //   return this.arrBody;
    },
  },

  methods: {
    show(id) {
      this.delId = id;
      this.isShow = true;
    },
    confirm() {
      var idnum = this.delId;
      this.arrBody = this.arrBody.filter((item) => item.id !== idnum);
      // var index = "";  //另一种删除的方法
      // this.arrBody.some((item, i) => {
      //   if (item.id === idnum) {
      //     index = i;
      //     return true;
      //   }
      // });

      // this.arrBody=this.arrBody.filter(item=>{ return item.id !==idnum});  //另一种方法
      // this.arrBody.splice(index, 1);

      localStorage.setItem("arrBody", JSON.stringify(this.arrBody));

      this.isShow = false;
    },
    cancel() {
      //点击取消按钮
      this.isShow = false;
      console.log("qx");
    },
    // del(idnum) {

    //   var index = "";
    //   this.arrBody.some((item, i) => {
    //     if (item.id === idnum) {
    //       index = i;
    //       return true;
    //     }
    //   });

    //   // this.arrBody=this.arrBody.filter(item=>{ return item.id !==idnum});  //另一种方法
    //   this.arrBody.splice(index, 1);

    //   localStorage.setItem("arrBody", JSON.stringify(this.arrBody));
    // },
  },
};
</script>
